import React, { Component } from "react";
import { getGoodsDetail } from "../../utils/dataApi";
import { withRouter } from "react-router-dom";
import { Carousel } from "antd-mobile";
import PageNav from "../PageNav";
import styles from "./GoodDetail.module.scss";

class GoodsDetail extends Component {
  state = {
    goods: [],
    imgHeight: 176,
  };
  
  async componentDidMount() {
    let { goods_id } = this.props.match.params;
    console.log('商品id:',goods_id);
    let res = await getGoodsDetail({
      goods_id: goods_id,
    });

    this.setState({
      goods: res.message,
    });
    console.log(this.state.goods);
  }

  render() {
    let { pics } = this.state.goods;
    pics = pics || [];
    console.log(pics);

    return (
      <div className={styles.ykGoodsDetail}>
        <PageNav title="商品详情" left={true}></PageNav>

        {/* 轮播图组件 */}
        <div className={styles.yhGDSwiper}>
          <Carousel autoplay={true} infinite>
            {pics.map((val) => {
              <img
                key={val.pics_id}
                src={val.pics_mid}
                style={{ width: "100%", verticalAlign: "top" }}
                onLoad={()=>{
                    window.dispatchEvent(new Event("resize"));
                    this.setState({imgHeight:"auto"})
                }}
              />
            })}
          </Carousel>
        </div>
      </div>
    );
  }
}

export default withRouter(GoodsDetail);
